<template>
  <div>
    <div class="massage">
      <div class="massage-top">
        <h1>消息中心</h1>
        <div class="massage-top-1">
          <img src="/img/saoba.png" alt="" />
          <img src="/img/shezhi.png" alt="" />
        </div>
      </div>

      <div class="massage-content">
        <div class="massage-content-1">
          <van-badge dot :offset="[-6, 6]">
            <div class="massage-c-img" style="background-color: #3478f6">
              <img src="/img/lingdang.png" alt="" />
            </div>
          </van-badge>
          <div class="massage-c-1-1">
            <div class="massage-c-1-2">
              <div>系统消息</div>
              <span>3 分钟</span>
            </div>
            <div class="massage-c-1-3">你发起的3月27日20:00一起跑已结束</div>
          </div>
        </div>
        <div class="massage-content-1">
          <van-badge dot :offset="[-6, 6]">
            <div class="massage-c-img" style="background-color: #ff9900">
              <!-- <img src="/img/lingdang.png" alt="" /> -->
              <van-icon name="chat-o" style="font-size: 24px; color: #fff" />
            </div>
          </van-badge>
          <div class="massage-c-1-1">
            <div class="massage-c-1-2">
              <div>互动消息</div>
              <span>2 天前</span>
            </div>
            <div class="massage-c-1-3">@花琉璃评论了你的内容</div>
          </div>
        </div>
      </div>
      <div class="divider"></div>

      <div class="massage-lt">
        <h3>私聊信息</h3>
        <div
          class="massage-content-1"
          v-for="item in newuserList"
          :key="item.id"
          @click="tiao(item)"
        >
          <div class="massage-c-img">
            <img
              :src="item.img"
              style="width: 100%; height: 100%; border-radius: 50%"
              alt=""
            />
          </div>
          <div class="massage-c-1-1">
            <div class="massage-c-1-2">
              <div>{{ item.name }}</div>
              <span>1 周前</span>
            </div>
            <div class="massage-c-1-3">来欣赏妾身的舞姿嘛</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import axios from "../../utils/axios.js";
import { useRouter } from "vue-router";

const userList = ref([]);
const ids = localStorage._id && localStorage._id;

const getUser = async () => {
  let { data } = await axios.get("/hy/list");
  // console.log(data);
  userList.value = data;
};

const router = useRouter();
const tiao = (item) => {
  router.push({
    name: "chat",
    params: {
      id: item._id,
      name: item.name,
      img: item.img
    }
  })
}
const newuserList=computed(()=>{
   let userasdhj=userList.value.filter(item=>item._id !==ids)
   return userasdhj
})

onMounted(() => {
  getUser();
});
</script>

<style lang="scss" scoped>
.massage {
  margin: 0 15px;
}
.massage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 27px;
    font-weight: 400;
  }
  .massage-top-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 25px;
      margin: 0 5px;
    }
  }
}
.massage-content-1 {
  display: flex;
  margin: 20px 0px;
  .massage-c-img {
    width: 45px;
    height: 45px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      
      width: 30px;
    }
  }
  .massage-c-1-3 {
    color: #7f7f7f;
    font-size: 14px;
    font-weight: 400;
  }
  .massage-c-1-1 {
    flex: 1;
    display: flex;
    margin: 0px 10px;
    flex-direction: column;
    justify-content: space-between;
    .massage-c-1-2 {
      display: flex;
      justify-content: space-between;
      div {
        font-size: 17px;
      }
      span {
        font-size: 14px;
        color: #cbcbcb;
      }
    }
  }
}
.divider {
  height: 1px; /* 分割线的厚度 */
  width: 100%; /* 分割线的宽度，占满容器宽度 */
  background-color: #efefef; /* 分割线的颜色 */
  margin: 20px 0; /* 上下边距 */
}
.massage-lt {
  margin: 0 0 0 5px;
}
</style>
